<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>相对定位与绝对定位</title>
		<!-- 定位：元素正确布局
		 ①浮动定位：左右布局
		 ②相对定位：微调布局针对单一元素  
		   position:relative    声明元素进行相对定位
		    特点：相对与父级进行定位，不脱离文档流
			附加属性：方向属性，left，top，right，bottom,
			属性值：正负数值px
			    z轴叠加属性：z-index--属性值：数值，数值越大，越靠前
				
		 ③绝对定位：叠加效果，通常与相对定位搭配使用,左栏，侧边栏，遮罩栏
		          左栏---挂靠点
		 position:absolute; 声明元素进行绝对定位
		  特点：相对于祖先【页面左上视角】进行定位
		       如果有父元素，按照父元素【左上顶角】，脱离文档流
		  使用方法：通常与相对定位搭配使用
		 ④固定定位： fiexd 页面区域固定在页面上
		    相对，绝对，固定属性----附加属性全部通用：方向，叠加属性
		 
		 ⑤文档流定位：按照元素分类进行定位：块与块【纵排】
		                                 行与行【横排】
										 块与行【横排】 
		 -->
	<style>
		div{
			height: 300px;
		    width: 300px;
		}
		div.box1{
			background: url(img/2.png);
			background-size: 100%;
			/* 相对定位，相对就近父级 */
			position: relative;
			left: 0px;
			top: 0px;
			/* 叠加属性 */
			z-index: 2;
			
		}
		div.box2{
			background: url(img/4.png);
			background-size: 100%;
			position: relative;
			left: 0px;
			top: 0px;
			z-index: 1;
		}
		
	</style>	 
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
	</body>
</html>